<template>
  <div class="body">
    <div class="login">
      <h2>智约会议</h2>
      <div class="login_box">
        <input type="text" required="required" v-model="user.name" /><label
          >用户名</label
        >
      </div>
      <div class="login_box">
        <input type="text" required="required" v-model="user.phone" /><label
          >手机号</label
        >
      </div>
      <a href="javascript:void(0)" @click="doLogin">
        登录
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </a>
    </div>
  </div>
</template>


<script setup>
import router from "@/router";
import "../assets/login.css";
import { ref } from "vue";
import { login } from "@/api/user";
import { ElMessage } from "element-plus";
import { useTokenStore} from '@/stores/token';
import {useUserStore} from '@/stores/user'
//解构出tokenStore
const tokenStore = useTokenStore();
const userStore = useUserStore();
//数据区
const user = ref({
  name: "测试",
  phone: "18185987451",
});

//方法区
function doLogin() {
  if (user.value.name === "" || user.value.phone === "") {
    ElMessage({
      showClose: true,
      message: "用户名或者手机号不能为空！",
      type: "error",
    });
  } else {
    login(user.value).then((res) => {
      if (res.code === 200) {
        //登录成功后存储token值
        if(res.data.user.name === '测试'){
          tokenStore.setAdmin(true)
        }
        tokenStore.setToken(res.data.token);
        userStore.setUserInfo(res.data.user);
        router.push("/index");
        ElMessage({
          showClose: true,
          message: "欢迎" + res.data.user.name + "登录智约会议管理系统！",
          type: "success",
        });
      }
    });
  }
}
</script>


<style scoped>
</style>